<!--
 * @Author: 刘翔
 * @Date: 2025-08-01 09:18:41
 * @LastEditTime: 2025-09-01 16:32:12
 * @LastEditors: your name
 * @Description: 页面组合4(MDC大类超支分析)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType4.vue
-->
<template>
  <div class="page-type-4">
    <div class="page-type-4-center-1">
      <div class="page-type-4-center-1-left">
        <MixedChart ref="chart1" v-bind="getChartProps1()" />
      </div>
      <div class="page-type-4-center-1-right">
        <DataTable ref="table1" v-bind="getTableProps1()" />
      </div>
    </div>
    <div class="page-type-4-center-2">
      <div class="page-type-4-center-2-left">
        <MixedChart ref="chart2" v-bind="getChartProps2()" />
      </div>
      <div class="page-type-4-center-2-right">
        <DataTable ref="table2" v-bind="getTableProps2()" />
      </div>
    </div>
  </div>
</template>

<script>
import MixedChart from '../components/MixedChart.vue';
import DataTable from '../components/DataTable.vue';
export default {
  name: 'pageType4',
  components: {
    MixedChart,
    DataTable,
  },
  props: {
    chartList1: {
      type: Object,
      default: () => {},
    },
    chartList2: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    //获取图表配置
    getChartProps1() {
      const _this = this;
      return {
        title: this.chartList1.title,
        // 主系列数据
        primaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        },
        // 次系列数据
        secondaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[1]]),
        },
        // 系列类型
        seriesTypes: {
          primary: 'bar',
          secondary: 'line',
        },
        //是否共用Y轴
        shareYAxis: false,
        // 图例配置
        legend: {
          data: this.chartList1.keyList,
        },
        // 图表配置
        chartConfig: {
          height: 450,
          // 图例配置
          legend: {
            data: this.chartList1.keyList,
          },
          // 网格配置
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          // 坐标轴配置
          axis: {
            // 分类轴配置
            category: {
              axisLabel: {
                color: '#333',
                fontSize: 18,
              },
              nameLocation: 'middle',
              nameGap: 30,
            },
            // 主值轴配置
            primary: {
              name: this.chartList1.keyList[0],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[0],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList1.colors[0],
                fontSize: 12,
              },
            },
            // 次值轴配置
            secondary: {
              name: this.chartList1.keyList[1],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[1],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList1.colors[1],
                fontSize: 12,
              },
            },
          },
          // 系列配置
          series: {
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
            },
            // 主系列配置
            primary: {
              name: this.chartList1.keyList[0],
              itemStyle: {
                color: this.chartList1.colors[0],
                normal: {
                  color: function (params) {
                    return params.data >= 0 ? _this.chartList1.colors[0] : '#ee6666';
                  },
                },
              },
            },
            // 柱状图通用配置
            bar: {
              barWidth: '40%',
              itemStyle: {
                color: this.chartList1.colors[0],
                normal: {
                  color: function (params) {
                    return params.data >= 0 ? _this.chartList1.colors[0] : '#ee6666';
                  },
                },
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList1.unitList[0]}`,
              },
            },
            // 次系列配置
            secondary: {
              name: this.chartList1.keyList[1],
              itemStyle: {
                color: this.chartList1.colors[1],
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList1.unitList[1]}`,
              },
            },
            // 折线图通用配置
            line: {
              itemStyle: {
                color: this.chartList1.colors[1],
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList1.unitList[1]}`,
              },
              lineStyle: {
                width: 2,
              },
              smooth: true,
            },
          },
        },
        pptOptions: {
          // 图表位置和大小
          position: {
            x: 0.3,
            y: 1.0,
            w: 5.5,
            h: 2,
          },
          // 标题配置
          title: {
            x: 2.7,
            y: 0.7,
            fontSize: 16,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            // 图例配置
            showLegend: true,
            legendPos: 'b',
            // 分类轴配置
            catAxes: [{ catAxisTitle: this.chartList1.XShow }, { catAxisHidden: true }],
            dataLabelFormatCode: [
              `[${this.chartList1.data.map(item => item[this.chartList1.keyList[0]]).every(item => item < 0) ? '红色' : '黑色'}],##0.00${this.chartList1.unitList[0]}`,
              `[黑色]#,##0.00"${this.chartList1.unitList[1]}"`,
            ],
            // 显示数据标签
            showValue: true,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            // 值轴配置
            values: [
              {
                // 主值轴标题
                showValAxisTitle: false,
              },
              {
                // 次值轴标题
                showValAxisTitle: false,
              },
            ],
          },
        },
      };
    },
    //获取图表配置
    getChartProps2() {
      const _this = this;
      return {
        title: this.chartList2.title,
        // 主系列数据
        primaryData: {
          categories: this.chartList2.data.map(item => item[this.chartList2.XShow]),
          values: this.chartList2.data.map(item => item[this.chartList2.keyList[0]]),
        },
        // 次系列数据
        secondaryData: {
          categories: this.chartList2.data.map(item => item[this.chartList2.XShow]),
          values: this.chartList2.data.map(item => item[this.chartList2.keyList[1]]),
        },
        // 系列类型
        seriesTypes: {
          primary: 'bar',
          secondary: 'line',
        },
        //是否共用Y轴
        shareYAxis: false,
        // 图例配置
        legend: {
          data: this.chartList2.keyList,
          itemStyle: {
            color: `${this.chartList2.data.map(item => item[this.chartList2.keyList[0]]).every(item => item < 0) ? this.chartList2.colors[0] : '#ee6666'}`,
          },
        },
        // 图表配置
        chartConfig: {
          height: 450,
          // 图例配置
          legend: {
            data: this.chartList2.keyList,
          },
          // 网格配置
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          // 坐标轴配置
          axis: {
            // 分类轴配置
            category: {
              axisLabel: {
                color: '#333',
                fontSize: 18,
              },
              nameLocation: 'middle',
              nameGap: 30,
            },
            // 主值轴配置
            primary: {
              name: this.chartList2.keyList[0],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList2.colors[0],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList2.colors[0],
                fontSize: 12,
              },
            },
            // 次值轴配置
            secondary: {
              name: this.chartList2.keyList[1],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList2.colors[1],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList2.colors[1],
                fontSize: 12,
              },
            },
          },
          // 系列配置
          series: {
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
            },
            // 主系列配置
            primary: {
              name: this.chartList2.keyList[0],
              itemStyle: {
                color: this.chartList2.colors[0],
                normal: {
                  color: function (params) {
                    return params.data >= 0 ? _this.chartList2.colors[0] : '#ee6666';
                  },
                },
              },
            },
            // 柱状图通用配置
            bar: {
              barWidth: '40%',
              itemStyle: {
                color: this.chartList2.colors[0],
                normal: {
                  color: function (params) {
                    return params.data >= 0 ? _this.chartList2.colors[0] : '#ee6666';
                  },
                },
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList2.unitList[0]}`,
              },
            },
            // 次系列配置
            secondary: {
              name: this.chartList2.keyList[1],
              itemStyle: {
                color: this.chartList2.colors[1],
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList2.unitList[1]}`,
              },
            },
            // 折线图通用配置
            line: {
              itemStyle: {
                color: this.chartList2.colors[1],
              },
              lineStyle: {
                width: 2,
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList2.unitList[1]}`,
              },
              smooth: true,
            },
          },
        },
        pptOptions: {
          // 图表位置和大小
          position: {
            x: 0.3,
            y: 3.5,
            w: 5.5,
            h: 2,
          },
          // 标题配置
          title: {
            x: 2.5,
            y: 3.2,
            fontSize: 16,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            // 图例配置
            showLegend: true,
            legendPos: 'b',
            // 分类轴配置
            catAxes: [{ catAxisTitle: this.chartList2.XShow }, { catAxisHidden: true }],
            dataLabelFormatCode: [
              `[${this.chartList2.data.map(item => item[this.chartList2.keyList[0]]).every(item => item < 0) ? '红色' : '黑色'}],##0.00${this.chartList2.unitList[0]}`,
              `[黑色]#,##0.00"${this.chartList2.unitList[1]}"`,
            ],
            // 显示数据标签
            showValue: true,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            // 值轴配置
            values: [
              {
                // 主值轴标题
                showValAxisTitle: false,
              },
              {
                // 次值轴标题
                showValAxisTitle: false,
              },
            ],
          },
        },
      };
    },
    //获取表格配置
    getTableProps1() {
      return {
        tableParams: {
          tableTitle: this.chartList1.title,
        },
        columns: this.chartList1.columns,
        tableData: this.chartList1.data,
        pptOptions: {
          x: 6, // X轴位置
          y: 0.3, // Y轴位置
          w: 2, // 宽度
          h: 2.5, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: this.chartList1.columns.map(item => this.pptWidthPercentFn(item.widthPercent)),
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    //获取表格配置
    getTableProps2() {
      return {
        tableParams: {
          tableTitle: this.chartList2.title,
        },
        columns: this.chartList2.columns,
        tableData: this.chartList2.data,
        pptOptions: {
          x: 6, // X轴位置
          y: 3, // Y轴位置
          w: 2, // 宽度
          h: 2.5, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: this.chartList2.columns.map(item => this.pptWidthPercentFn(item.widthPercent)),
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    // 计算ppt宽度百分比(4是ppt目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 4;
    },
    exportToPPT(pptx, slide) {
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.chart2.exportToPPT(pptx, slide);
      this.$refs.table1.exportToPPT(pptx, slide);
      this.$refs.table2.exportToPPT(pptx, slide);
    },
  },
};
</script>

<style lang="less" scoped>
.page-type-4 {
  width: 100%;
  height: 100%;
  .page-type-4-center-1 {
    display: flex;
    width: 100%;
    height: 50%;
    .page-type-4-center-1-left {
      width: 70%;
      height: 100%;
    }
    .page-type-4-center-1-right {
      width: 30%;
      height: 100%;
    }
  }
  .page-type-4-center-2 {
    display: flex;
    width: 100%;
    height: 50%;
    .page-type-4-center-2-left {
      width: 70%;
      height: 100%;
    }
    .page-type-4-center-2-right {
      width: 30%;
      height: 100%;
    }
  }
}
</style>
